<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import CodeEditor from "../components/CodeEditor.vue";
import { defineProps } from "vue";

import { ElMessage } from "element-plus";
import router from "../config/route";

import { QuestionSubmitStatusEnum } from "../assets/content/SUBMIT_RESULT";
import {
  doSubmitUsingPost,
  getQuestionVoByIdAdminUsingGet,
  getQuestionVoByIdUsingGet,
  listMyQuestionSubmitVoByPageUsingPost,
} from "../servers/question/api/questionController";

// 父组件通过 props传递的参数
const { id } = defineProps<{ id: number }>();

/** 初始化提交代码数据 */
const initSubmitParam = {
  code: "",
  language: "java",
  questionId: id,
};
// 语言分类选择
const languageArray = ref(["java", "cpp", "go", "html"]);
// 代码编辑器双向绑定
const change = (v: string) => {
  submitParam.value.code = v;
};
// 提交代码参数
const submitParam = ref<API.QuestionSubmitAddRequest>({ ...initSubmitParam });

/** 获取数据 */
const title = ref("title");
const questionData = ref<API.QuestionVO>();
const getData = async (id: number) => {
  // 发送请求获取数据
  const res = await getQuestionVoByIdUsingGet({ id });
  if (res.data.code === 200) {
    // 存储展示
    questionData.value = res.data.data;
  } else {
    // 获取数据失败
    ElMessage.error("获取题目失败" + res.data.message);
    //跳转到上一页
    router.go(-1);
  }
};

onMounted(() => {
  getData(id);
});

//提交记录对象
const submitRecord = ref<API.QuestionSubmitVO[]>();
// 提交记录对象
const initQuestionSubmit = {
  current: 1,
  questionId: id,
};
// 题目提交对象请求参数
const questionSubmitParam = ref<API.QuestionSubmitQueryRequest>({
  ...initQuestionSubmit,
});

watch([title], async () => {
  if (title.value === "record") {
    // 查询记录
    const res = await listMyQuestionSubmitVoByPageUsingPost(
      questionSubmitParam.value
    );
    if (res.data.code === 200) {
      // 获取成功
      submitRecord.value = res.data.data?.records;
    } else {
      ElMessage.error("获取记录失败：" + res.data.message);
    }
  }
});

// 获取答案
const questionAnwser = ref("");
const getQuestionAnwser = async () => {
  const res = await getQuestionVoByIdAdminUsingGet({ id });
  if (res.data.code === 200) {
    ElMessage.success("获取答案成功");
    questionAnwser.value = res.data.data?.question?.answer ?? "";
  } else {
    ElMessage.error("提交题目失败" + res.data.message);
    questionAnwser.value = "";
  }
};

// 点击提交按钮
const submitQuestion = async () => {
  const res = await doSubmitUsingPost(submitParam.value);
  if (res.data.code === 200) {
    // 提交成功之后清除数据 并跳转到查看题目页
    ElMessage.success("提交题目成功");
    // 刷新页面
    router.go(0);
  } else {
    // 提交失败
    ElMessage.error("提交题目失败" + res.data.message);
  }
};

// const clearCode = () => {
//   submitParam.value.code = "";
// };
</script>
<template>
  <div class="do-question-view">
    <el-row :gutter="24" style="display: flex">
      <el-col :span="12">
        <!-- 题目描述 -->

        <el-tabs v-model="title" class="demo-tabs">
          <el-tab-pane label="题目介绍" name="title">
            <h3>{{ questionData?.title }}</h3>
            {{ questionData?.content }}
          </el-tab-pane>
          <el-tab-pane label="题目用例" name="judgeConfig">
            <div>
              <el-tag
                v-for="item in questionData?.tags"
                :key="item"
                type="primary"
                style="margin-left: 10px"
                >{{ item }}</el-tag
              >
            </div>
            <div>
              <div v-for="(item, index) in questionData?.judgeCase" key="item">
                输入{{ index }}：<el-text>{{ item.input }}</el-text
                ><br />
                输出{{ index }}：<el-text>{{ item.output }}</el-text>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="题目答案" name="anwser">
            <div>
              <el-button type="primary" @click="getQuestionAnwser"
                >点击获取答案</el-button
              >
              <div v-if="questionAnwser">
                <h3>答案： {{ questionAnwser }}</h3>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="提交记录" name="record">
            <div>
              <el-table :data="submitRecord" style="width: 100%">
                <el-table-column type="index" label="id" />
                <el-table-column prop="questionVO.title" label="标题" />
                <el-table-column prop="createTime" label="提交时间" />
                <el-table-column label="消耗时间" align="center">
                  <template #default="scope">
                    <span
                      >{{ scope.row.judgeInfo.time || 0 }}&nbsp;&nbsp;ms</span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="内存占用" align="center">
                  <template #default="scope">
                    <span
                      >{{
                        scope.row.judgeInfo.memoryLimit || 0
                      }}&nbsp;&nbsp;kb</span
                    >
                  </template>
                </el-table-column>

                <el-table-column prop="status" label="提交状态" align="center">
                  <template #default="scope">
                    <span>{{
                      QuestionSubmitStatusEnum.getEnumByValue(
                        scope.row.status
                      )?.getText()
                    }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="status" label="执行结果" align="center">
                  <template #default="scope">
                    <span>{{ scope.row.judgeInfo.message }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        <!-- 编辑器区域 -->
        <el-select
          v-model="submitParam.language"
          placeholder="选择语言"
          size="large"
        >
          <el-option v-for="item in languageArray" :key="item" :value="item"
        /></el-select>
        <CodeEditor
          style="margin-top: 10px"
          :value="submitParam.code ?? ''"
          :language="submitParam.language ?? ''"
          :change="change"
        ></CodeEditor>
        <el-button
          style="margin: 20px 0; display: flex; justify-self: center"
          type="primary"
          @click="submitQuestion"
          >提交题目</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>
<style scoped></style>
